<template>
  <view class="card">
    <!-- address -->
    <view class="posr">
      <!-- info -->
      <view @click="select">
        <view style="padding: 15rpx 30rpx">
          <text style="font-size: 34rpx">{{ info.consignee }}</text>
          <text style="margin-left: 18rpx; font-size: 32rpx">{{ info.phone }}</text>
        </view>
        <view style="padding: 0 30rpx 20rpx; font-size: 30rpx">{{ info.abbreviate + info.address }}</view>
      </view>
      <!-- remove btn -->
      <view class="posa trash-box" @click="remove">
        <uni-icons type="trash" color="#999" size="22"></uni-icons>
      </view>
    </view>
    <!-- btns -->
    <view class="flex-jcsb btn-box">
      <view class="flex-vcenter" style="padding: 0 30rpx" @click="setDefault">
      <!--  <uni-icons v-if="info.is_default === '1'" type="checkbox-filled" color="#2295ff" size="22"></uni-icons>
        <uni-icons v-else type="checkbox" color="#666" size="22"></uni-icons> -->
		<text class="checkbox-label" :class="info.is_default === '1' ? 'checked' : ''" style="font-size: 30rpx">
		  默认
		</text>
		<switch :checked="true" color="#007AFF" v-if="info.is_default === '1'" style="transform:scale(0.7)"/>
		<switch :checked="false" color="#007AFF" v-else style="transform:scale(0.7)"/>
      </view>
      <view class="flex-vcenter" style="padding: 0 30rpx">
        <view @click="edit" style="font-size: 30rpx">编辑</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  info: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(['select', 'set-default', 'edit', 'remove']);

function select() {
  emit('select', props.info);
}
function setDefault() {
  const { id, is_default } = props.info;
  emit('set-default', { id, is_default });
}
function edit() {
  emit('edit', props.info.id);
}
function remove() {
  emit('remove', props.info.id);
}
</script>

<style scoped lang="less">
.checkbox-mark {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 38rpx;
  height: 38rpx;
  background-color: white;
  border: 2rpx solid #c8c9cc;
  border-radius: 100%;
}

.checkbox-label {
  margin-left: 8rpx;
  color: #666;
}

.check-icon {
  transform: translate(6rpx, -6rpx);
}

.card {
  background: white;
  border-radius: 5px;
  box-shadow: 0rpx 2rpx 23rpx 1rpx rgba(204, 204, 204, 0.3);
  color: #333;

  .trash-box {
    top: 0rpx;
    right: 0rpx;
    width: 100rpx;
    height: 100rpx;
    line-height: 90rpx;
    text-align: center;
  }

  .checked {
    color: #3da1ff;
  }

  .btn-box {
    border-top: 2rpx solid #eee;
    height: 90rpx;
  }
}

.add-btn-box {
  position: fixed;
  bottom: 100rpx;
  width: 100vw;

  .btn {
    margin-top: 390rpx;
    width: 370rpx;
    height: 80rpx;
    font-size: 36rpx;
    color: white;
    background: linear-gradient(180deg, #41a3ff 0%, #1b91ff 100%);
    border-radius: 5px;
  }
}
</style>
